<template>
  <div>
    <!-- 上传图片的组件 -->
    <!--
      action 必传 需要给一个后端接口地址, elementui会帮你发送请求
      我们不需要它自动发请求, 我们将来自己发送请求, 此时给空 不让他报错

      list-type 文件列表的类型, 此处选择的是以照片墙的形式进行展示
    -->
    <el-upload
      :class="{disabled:isDisbled}"
      action=""
      list-type="picture-card"
      :limit="limit"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :http-request="handleUpload"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 对话框 -->
    <el-dialog :visible="dialogVisible" title="预览图片" @close="dialogVisible=false">
      <img :src="dialogImageUrl" alt="" style="width:100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包
// 创建一个腾讯云对象存储实例
const cos = new COS({
  SecretId: 'AKIDYw5ybx2qNdcKlunPkob7LJ9nBI8h02mF', // 身份识别ID
  SecretKey: 'IJ4YmiNlrgHgqkNimZ5KIyNUKtWsxlJb' // 身份秘钥
})
export default {
  name: 'UploadImage',
  props: {
    limit: { // 限制图片上传的数量
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 上传照片文件列表
      fileList: [],
      dialogImageUrl: '', // 图片url地址
      dialogVisible: false // 控制对话框的显示隐藏

    }
  },
  computed: {
    isDisbled() {
      return this.limit <= this.fileList.length
    },
    isAllUploadSuccess() {
      return this.fileList.every(i => i.status === 'success')
    }
  },
  methods: {
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url // 点击图片赋值当前url地址
      this.dialogVisible = true // 打开预览器的弹窗
    },
    handleRemove(file, fileList) { // 点击删除图片
      // file是当前点击的删除图片
      // fileList是点击删除后返回的数组
      // 把当前点击删除的图片筛选出去 重新赋值
      this.fileList = fileList.filter(item => item.uid !== file.uid)
    },
    handleUpload(obj) { // 自定义上传图片
    // 根据上传对象的uid去数组里面找到这个对象
      const uid = obj.file.uid
      const fileObj = this.fileList.find(item => item.uid === uid)
      //   上传直接把status的值改成upLoading
      fileObj.status = 'uploading'
      cos.putObject({
        Bucket: 'hrsass-49-cs-1312445828', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-shanghai', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: 'hrsass-49-' + (+new Date()) + '-' + obj.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: obj.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: (progressData) => {
          // console.log(progressData)
          // 设置上传的进度
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 此处一定要改成箭头函数, 否则拿不到this
        if (err) {
          this.$message.error('上传图片失败')
          return
        }
        // 更新上传的状态
        fileObj.status = 'success'
        // 用图片的线上地址更新本地的临时地址
        fileObj.url = 'https://' + data.Location
      })
    },
    handleChange(file, fileList) { // 图片真正后台上传的方法
      this.fileList = fileList
    },
    handleBeforeUpload(file) { // 照片上传前的格式和大小校验
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传的图片不能超过2MB')
        return false
      }
    }
  }

}
</script>

<style lang='scss' scoped>
.disabled{
 ::v-deep {
    .el-upload--picture-card{
    display: none;
    }
 }
}
</style>
